<template>
  <Form ref="addFrom" :model="form" :rules="rules" @keydown.enter.native="handleSubmit">
    <FormItem label="允许上传文件大小（M）：" prop="UPLOAD_SIZE">
      <Input v-model="form.UPLOAD_SIZE" placeholder="请输入允许上次文件大小值"></Input>
    </FormItem>
    <FormItem label="允许上传文件格式：" prop="UPLOAD_EXT">
      <Input v-model="form.UPLOAD_EXT" placeholder="请输入允许上次文件格式,如:jpg,png,gif"></Input>
    </FormItem>
    <FormItem label="顶级域名：" prop="DOMAIN">
      <Input v-model="form.DOMAIN" placeholder="请输入顶级域名"></Input>
    </FormItem>
    <FormItem label="管理模块域名：" prop="MANAGE_DOMAIN">
      <Input v-model="form.MANAGE_DOMAIN" placeholder="请输入二级域名">
      <span slot="append">.{{form.DOMAIN}}</span>
      </Input>
    </FormItem>
    <FormItem label="API模块域名：" prop="API_DOMAIN">
      <Input v-model="form.API_DOMAIN" placeholder="请输入二级域名">
        <span slot="append">.{{form.DOMAIN}}</span>
      </Input>
    </FormItem>
    <FormItem label="管理接口秘钥：" prop="MANAGE_KEY">
      <Input v-model="form.MANAGE_KEY" placeholder="请输入秘钥"></Input>
    </FormItem>
     <FormItem label="APP接口秘钥：" prop="APP_KEY">
      <Input v-model="form.APP_KEY" placeholder="请输入秘钥"></Input>
    </FormItem>
    <FormItem>
      <div style="width:80%;margin:0 auto;">
        <Button type="primary" :loading="submit" @click="handleSubmit" long>
          <span v-if="!submit">确定保存</span>
          <span v-else>创建中...</span>
        </Button>
      </div>
    </FormItem>
  </Form>
</template>

<style lang="less" scoped>
.avator {
  height: 126px;
  width: 126px;
  float: left;
  img {
    border-radius: 50px;
    margin: 0 auto;
    margin-top: 13px;
    height: 100px;
    width: 100px;
  }
}
</style>

<script>

export default {
  name: 'addFrom',
  props: {
    uploadSizeRules: {
      type: Array,
      default: () => {
        return [
          {
            required: true,
            message: '上传文件大小不能为空',
            trigger: 'blur'
          }
        ]
      }
    },
    domainRules: {
      type: Array,
      default: () => {
        return [
          {
            required: true,
            message: '顶级域名不能为空',
            trigger: 'blur'
          }
        ]
      }
    },
    manageKeyRules: {
      type: Array,
      default: () => {
        return [
          {
            required: true,
            message: '秘钥不能为空',
            trigger: 'blur',
            type: 'string'
          }
        ]
      }
    },
    appKeyRules: {
      type: Array,
      default: () => {
        return [
          {
            required: true,
            message: '秘钥不能为空',
            trigger: 'blur'
          }
        ]
      }
    },
    uploadExtRules: {
      type: Array,
      default: () => {
        return [
          {
            required: true,
            message: '上传格式不能为空',
            trigger: 'blur'
          }
        ]
      }
    },
    manageDomainRules: {
      type: Array,
      default: () => {
        return [
          {
            required: true,
            message: '二级域名不能为空',
            trigger: 'blur'
          }
        ]
      }
    },
    apiDomainRules: {
      type: Array,
      default: () => {
        return [
          {
            required: true,
            message: '二级域名不能为空',
            trigger: 'blur'
          }
        ]
      }
    },
    form: Object
  },
  watch: {

  },
  data () {
    return {
      submit: false
    }
  },
  computed: {
    rules () {
      return {
        UPLOAD_SIZE: this.uploadSizeRules,
        DOMAIN: this.domainRules,
        MANAGE_KEY: this.manageKeyRules,
        APP_KEY: this.appKeyRules,
        UPLOAD_EXT: this.uploadExtRules,
        MANAGE_DOMAIN: this.manageDomainRules,
        API_DOMAIN: this.apiDomainRules
      }
    }
  },
  methods: {
    handleSubmit () {
      this.$refs.addFrom.validate((valid) => {
        if (valid) {
          this.submit = true
          this.$emit('on-success-valid', this.form)
        } else {
          this.submit = false
        }
      })
    },
    success () {
      this.submit = false
    },
    fail () {
      this.submit = false
    }
  }
}
</script>
